<template>
  <div class="phone" id="phone">
    <div class="top">
      <img class="img1" src="../../../wechat/static/images/login_bg.png" alt>
      <img class='img2' src="../../../wechat/static/images/login_logo.png" alt="">
    </div>
    <div class="middle">
      <div class="one">
        <h3>首次使用绑定手机号</h3>
      </div>
      <div class="two">
        <div class="section">
          <div class="img">
            <img src="../../../wechat/static/images/login_phone.png" alt>
          </div>
          <input v-model="userName" type="number" placeholder="请输入手机号">
        </div>
        <div class="section">
          <div class="img">
            <img src="../../../wechat/static/images/login_number.png" alt>
          </div>
          <input v-model="pwd" type="text" maxlength='6' placeholder="请输入验证码">
          <a href="javascript:;" @click="getCode">{{codeTxt}}</a>
        </div>
      </div>
      <div class="three">
        <a href="javascript:;" @click="login">完成并登录</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "phone",
  data() {
    return {
      userName: '',
      pwd: '',
      isGetCode: false,
      codeTxt: '获取验证码',
      canGetcode: true,
    };
  },
  mounted() {
    this.$common.setCookie('sessionId',this.$common.getCookie('sessionIdnormal')||'')
    
    if(this.$common.getCookie('sessionId')&&this.$common.getCookie("sessionId")!='null'){// 直接登录
      this.userName = localStorage.getItem("userNamephone")||''
      this.findEsShopUserCoreById()
    }else {
      this.userName = localStorage.getItem("userNamephone")||''
    }
  },
  beforeCreate(){
    localStorage.setItem('userType','normal')
    console.log(this.$common.getQueryString('type'))
    console.log(this.$common.isIOS())
    if(this.$common.getQueryString('type')=='password'){
      if(this.$common.isIOS()){
        window.location.href =API+ '?type=password#/password'
      }else {
        this.$router.push('/password')
      }
    }else if(this.$common.getQueryString('type')=='password1'){
      if(this.$common.isIOS()){
        window.location.href =API+ '?type=password1#/password?classtype=birPool'
      }else {
        this.$router.push('/password?classtype=birPool')
      }
    }else if(this.$common.getQueryString('type')=='password2'){
      if(this.$common.isIOS()){
        window.location.href =API+ '?type=password2#/password?classtype=newYearW'
      }else {
        this.$router.push('/password?classtype=newYearW')
      }
    }else if(this.$common.getQueryString('type')=='password3'){
      if(this.$common.isIOS()){
        window.location.href =API+ '?type=password3#/password?classtype=building'
      }else {
        this.$router.push('/password?classtype=building')
      }
    }else if(this.$common.getQueryString('type')=='store'){
      if(this.$common.isIOS()){
        window.location.href =API+ '?type=store#/password?store=store'
      }else {
        this.$router.push('/password?store=store')
      }
    }
  },
  created() {},
  methods: {
    findEsShopUserCoreById() {
      let url =
        this.$CONSTANT.MY.findEsShopUserCoreById +
        "?sessionId=" +
        this.$common.getCookie("sessionId");
      let param = {};
      this.$vux.loading.show({
        text: "自动登录中"
      });
      this.$common.post(url, param, res => {
        setTimeout(() => {
          this.$vux.loading.hide();
        }, 800);
        if (res.status == 200) {
          var bussData = res.data.bussData;
          localStorage.setItem('userId',bussData.userId)
          if(bussData.type=='normal'){
            setTimeout(() => {
              let openId = localStorage.getItem("openId");
              this.saveEsShopUserCore(bussData.userId,openId);
            }, 2000);
            localStorage.setItem('userImg','')
            if(this.$route.query.classtype){
              localStorage.setItem('golist',1)
              localStorage.setItem('classtype',this.$route.query.classtype)
              this.$router.push("./home");
            }else {
              this.$router.push("./home");
            }
          }else {
            // this.$common.setCookie("sessionId", "");
            localStorage.setItem('userImg','')
            this.userName = localStorage.getItem("userNamephone")
          }
        } else {
          this.userName = localStorage.getItem("userNamephone")
          this.$vux.toast.show({
            text: res.msg,
            type: "warn",
            width: "auto"
          });
        }
      });
    },
    getCode() {
      if(!this.canGetcode){
        return
      }
      if(!this.userName){
        this.$vux.toast.show({
          text: "手机号不能为空",
          type: "warn",
              width: 'auto'
        });
        return
      }
      if(!this.userName){
        this.$vux.toast.show({
          text: "手机号不能为空",
          type: "warn",
              width: 'auto'
        });
        return
      }
      let url = this.$CONSTANT.MY.findMobileCode+'?mobile='+this.userName;
      let param = {
        // mobile: this.userName,
      };
      this.$common.post(url, param, res => {
        if (res.status == 200) {
          var c = 60
          this.canGetcode = false
          var t = setInterval(() => {
            c--
            this.codeTxt = c+'s后获取'
            if(c == 0) {
              this.codeTxt = '重新获取'
              this.canGetcode = true
              clearInterval(t)
            }
          }, 1000);
          this.isGetCode = true
          this.$vux.toast.show({
            text: res.msg,
            type: "",
              width: 'auto'
          });
        } else {
          this.$vux.toast.show({
          text: res.msg,
          type: "warn",
              width: 'auto'
        });
        }
      });
    },
    login() {
      if(!this.userName){
        this.$vux.toast.show({
          text: "手机号不能为空",
          type: "warn",
              width: 'auto'
        });
        return
      }
      if(!this.pwd){
        this.$vux.toast.show({
          text: "验证码不能为空",
          type: "warn",
              width: 'auto'
        });
        return
      }
      let url = this.$CONSTANT.MY.normallogin;
      let param = {
        pwd: this.pwd,
        userName: this.userName,
        type:'normal'
      };
      this.$vux.loading.show({
        text: '登录中...'
      })
      setTimeout(() => {
        this.$common.post(url, param, res => {
          this.$vux.loading.hide()
          if (res.status == 200) {
            var bussData = res.data.bussData
            this.$vux.toast.show({
              text: res.msg,
              type: "",
              width: 'auto'
            });
            setTimeout(() => {
              this.$common.setCookie('sessionId',bussData.sessionId)
              this.$common.setCookie('sessionIdnormal',bussData.sessionId)
              let openId = localStorage.getItem("openId");
              this.saveEsShopUserCore(bussData.userId,openId);
              localStorage.setItem('userImg','')
              localStorage.setItem('userId',bussData.userId)
              localStorage.setItem("loginsuccesstype", 'normal');
              localStorage.setItem("userNamephone", this.userName);
              if(this.$route.query.classtype){
                console.log('this.$route.query.classtype2')
                console.log(this.$route.query.classtype)
                localStorage.setItem('golist','1')
                localStorage.setItem('classtype',this.$route.query.classtype)
                // this.$router.push("./"+this.$route.query.classtype);
                this.$router.push("./home");
              }else {
                this.$router.push("./home");
              }
              this.$common.isOnloadPage()
            }, 1000);
          } else {
            this.$vux.toast.show({
              text: res.msg,
              type: "warn",
              width: 'auto'
            });
          }
        });
      }, 1000);
    },
    saveEsShopUserCore(userId,openId){
      if(location.href.includes('localhost'))return
      let url = this.$CONSTANT.MY.saveEsShopUserCore+
        "?sessionId=" +
        this.$common.getCookie("sessionId");
        console.log(url);
        this.$common.post(
          url,
          {
            userId,
            weixinUserId:localStorage.getItem('weixinId'),
            type:'normal',
            openId:openId||''
          },
          res => {
            console.log(res);
          }
        );
    },
  },
  components: {}
};
</script>

<style lang="less">
#phone {
  .top {
    height: 239px;
    // position: relative;
    .img1 {
      width: 100%;
      display: inline-block;
      height: 100%;
    }
    .img2 {
      position: absolute;
      width: 80px;
      height: 79px;
      top: 27px;
      left: 39.5%;
    }
  }
  .middle {
    margin: -106px 12px 0;
    border: 1px solid transparent;
    border-radius: 14px;
    box-shadow: 1px 1px 11px #d3cece;
    height: 350px;
    background: #fff;
    position: relative;
    .one {
      h3 {
        font-family: PingFang-SC-Bold;font-weight: 600;
        color: #333333;
        font-size: 18px;
        margin: 43px 0 0 21px;
      }
    }
    .two {
      margin: 20px 20px 0;
      .section {
        height: 61px;
        line-height: 61px;
        position: relative;
        .img {
          display: inline-block;
          float: left;
          width: 17px;
          height: 17px;
          // margin-right: 8px;
          position: absolute;
          left: 9px;
          top: 4px;
          img {
            height: 100%;
          }
        }
        input {
          text-indent: 33px;
          // margin-left: -33px;
          padding: 20px 0;
          width: 100%;
          border-bottom: 1px solid #d9d9d9;
          font-family: PingFang-SC-Medium;
          font-size: 15px;
        }
        input::-webkit-input-placeholder {
          color: #999;
        }
        a {
          float: right;
          position: absolute;
          top: 14px;
          right: 10px;
          height: 29px;
          width: 82px;
          line-height: 29px;
          background-color: #ffe2e2;
          border: 1px solid transparent;
          border-radius: 4px;
          text-align: center;
          font-family: PingFang-SC-Medium;
          font-size: 12px;
          color: #ff444c;
          &:hover {
            background-color: #efcece;
          }
        }
      }
    }
    .three {
      margin-top: 70px;
      text-align: center;
      a {
        display: inline-block;
        width: 80%;
        height: 42px;
        line-height: 42px;
        border: 1px solid transparent;
        border-radius: 21px;
        background-color: #f02931;
        font-family: PingFang-SC-Medium;
        font-size: 17px;
        color: #fff;
        text-align: center;
        &:hover {
          background-color: #e1252c;
        }
      }
    }
  }
}
</style>
